<!DOCtype html>
<html>

<head>
    <meta charset="utf-8">
    <title>一个简历demo04</title>
    <style>
        h1 {
            font-size: 60px;
            text-align: center;
            color: #c2b7a1;
        }
        
        #box1 {
            width: 50%;
            background: transparent;
            position: absolute;
            left: 25%;
            text-align: center;
        }
        
        #box2 {
            background: rgba(142, 70, 63, 0.5);
            border-radius: 20px 0px 0px 20px;
            width: 25%;
            height: 70%;
            position: absolute;
            left: 25%;
            top: 200px;
        }
        
        #box3 {
            border-radius: 0px 20px 20px 0px;
            width: 25%;
            height: 70%;
            background: rgba(143, 75, 62, 0.7);
            position: absolute;
            right: 25%;
            top: 200px;
        }
        
        .image {
            width: 150px;
            height: 150px;
            border-radius: 200px;
            margin-top: 100px;
            position: absolute;
            top: 15%;
            left: 35%;
        }
        
        #word1 {
            font-weight: bold;
            color: #f6d64d;
            font-size: 40px;
            text-align: center;
            position: absolute;
            top: 70%;
            left: 40%;
            text-decoration: underline;
        }
        
        p {
            text-indent: 2em;
            color: black;
            font-size: 30px;
            font-weight: bold;
        }
        
        li {
            font-family: Cursive;
            text-shadow: 5px 5px 5px #c9ec84;
            font-weight: bold;
            color: white;
            font-size: 20px;
        }
        
        span {
            font-size: 30px;
            font-weight: bold;
            color: white;
            font-family: Cursive;
            text-shadow: 5px 5px 5px #c9ec84;
        }
        
        body {
            background-image: url(E:/html/简历/image/1.jpg);
            background-size: 100%;
        }
    </style>
</head>

<body>
    <section id="box1">
        <h1>简历</h1>
        <hr>
    </section>
    <section id="box2">
        <img class="image" src="http://b-ssl.duitang.com/uploads/item/201409/27/20140927123921_3wcGw.thumb.700_0.jpeg" width="150px" height="150px">
        <button id="word1">Enoo</button>
    </section>
    <section id="box3">
        <br>
        <p>联系方式</p>
        <ul>
            <li>电话：xxxxxxxx</li>
            <li>邮箱：<a href="mailto:82547254@qq.com" target="_blank">hinsenoo@qq.com</a></li>
        </ul>
        <p>学历：<span>XX大学 本科</span></p>
        <p>项目经验</p>
        <ul>
            <li>项目A：项目时间：2017.1-2017.8</li>
            <li>项目描述：在项目A中负责了xxxxx</li>
        </ul>
        <p>技能掌握</p>
        <ul>
            <li class="li1">html基础</li>
            <li class="li1">css基础</li>
        </ul>
    </section>
    <script>
        document.getElementById("word1").onclick = function(){
            alert("Hello! 这里是Enoo的简历")
        }
    </script>
</body>

</html>